﻿function renderSpinButton(holderElementSelector, onSelect) {
    $(holderElementSelector).hide();
    $(holderElementSelector).html('');
    $('<div><button value="spin">SPIN</button></div>').appendTo(holderElementSelector);
    $(holderElementSelector).show('fast');
    $('button', $(holderElementSelector)).click(function () {
        onSelect($(this).val());
        $(holderElementSelector).hide('fast');
    });
}
function renderButtons(letters, holderElementSelector)
{
    $(holderElementSelector).html('');
    var letterlist = letters.split('');
    for (var i = 0; i < letterlist.length; i++)
        if(letterlist[i]!= ' ')
            $('<div><button value="' + letterlist[i] + '">' + letterlist[i] + '</button></div>').appendTo(holderElementSelector);
        else
            $('<div class="space">&nbsp;</div>').appendTo(holderElementSelector);        
}
function letterButtons(letters, holderElementSelector, onSelect) {
    $(holderElementSelector).hide();
    renderButtons(letters, holderElementSelector);
    $('<div class="big"><button value="solvethepuzzle">Solve</button></div>').appendTo(holderElementSelector);
    $(holderElementSelector).show('fast');
    $('button', $(holderElementSelector)).click(function () {
        if ($(this).val() == "solvethepuzzle") {
            FullTextButtons(holderElementSelector, "#displayTextButtons", onSelect);
            return;
        }
        onSelect($(this).val());
        $(holderElementSelector).hide('fast');
    });
}

function letterButtonsFromServer( holderElementSelector, onSelect) {
    $.ajax({
        url: baseURL + 'home/GetNonSelectedLetters',
        type: 'post',
        cache: false,
        contentType: 'application/json; charset=utf-8',
        dataType: 'json',
        success: function (json) {
            letterButtons(json, holderElementSelector, onSelect);
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            console.log("error :" + XMLHttpRequest.responseText);
        }
    });
}


function FullTextButtons(holderElementSelector, displaySelector, onSelect) {
    var letters = "abcdefghijklmnopqrstuvwxyz";
    var selectedleters = '';
    $(holderElementSelector).hide();
    renderButtons(letters, holderElementSelector);
    $('<div class="big"><button value="delete">delete</button></div>').appendTo(holderElementSelector);
    $('<div class="big"><button value=" ">space</button></div>').appendTo(holderElementSelector);
    $('<div class="big"><button value="enter">enter</button></div>').appendTo(holderElementSelector);
    $(holderElementSelector).show('fast');
    $(displaySelector).html('').show('fast');
    $('button', $(holderElementSelector)).click(function () {
        if ($(this).val() == "delete") {
            if (selectedleters.length > 0) {
                selectedleters = selectedleters.substr(0, selectedleters.length - 1);
                renderButtons(selectedleters, displaySelector);
            }
            return;
        }
        else if ($(this).val() == "enter") {
            onSelect(selectedleters);
            $(holderElementSelector).hide('fast');
            $(displaySelector).hide('fast');
        }

        selectedleters += $(this).val();
        renderButtons(selectedleters, displaySelector);
    });
}